import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h, toRaw, VNode } from 'vue';
import { Switch, Tag, Space } from 'ant-design-vue';
import { setUserStatus } from '/@/api/system/system';
import { useMessage } from '/@/hooks/web/useMessage';

export const columns: BasicColumn[] = [
  {
    title: '用户名',
    dataIndex: 'userName',
    width: 120,
  },
  {
    title: '真实姓名',
    dataIndex: 'realName',
    width: 120,
  },
  {
    title: '所属机构',
    dataIndex: 'branchName',
  },
  {
    title: '用户状态',
    dataIndex: 'status',
    width: 120,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Switch, {
        checked: record.status === 'Y',
        checkedChildren: '已启用',
        unCheckedChildren: '已禁用',
        loading: record.pendingStatus,
        onChange(checked: boolean) {
          record.pendingStatus = true;
          const newStatus = checked ? 'Y' : 'N';
          const { createMessage } = useMessage();
          setUserStatus(record.id, checked)
            .then(() => {
              record.status = newStatus;
              createMessage.success(`已成功修改用户状态`);
            })
            .catch(() => {
              createMessage.error('修改用户状态失败');
            })
            .finally(() => {
              record.pendingStatus = false;
            });
        },
      });
    },
  },
  {
    title: '角色',
    dataIndex: 'role',
    width: 200,
    customRender: ({ record }) => {
      const getVNodes = () => {
        const roles = toRaw(record.roles);
        const text: VNode[] = [];
        if (roles) {
          roles.forEach((element) => text.push(h(Tag, { color: 'blue' }, () => element.roleName)));
        }
        return text;
      };

      return h(Space, {}, { default: getVNodes });
    },
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    width: 120,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
    sorter: true,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'realname',
    label: '真实姓名',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'status',
    label: '用户状态',
    component: 'Select',
    colProps: { span: 8 },
    componentProps: {
      options: [
        {
          label: '启用',
          value: 'Y',
        },
        {
          label: '禁用',
          value: 'N',
        },
      ],
    },
  },
  {
    field: 'email',
    label: '邮箱',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'roles',
    label: '所属角色',
    component: 'Select',
    colProps: { span: 8 },
  },
];

export const accountFormSchema: FormSchema[] = [
  {
    field: 'userName',
    label: '用户名',
    component: 'Input',
    required: true,
  },
  {
    field: 'realName',
    label: '真实姓名',
    component: 'Input',
    required: true,
  },
  {
    field: 'password',
    label: '密码',
    component: 'InputPassword',
    required: true,
  },
  {
    field: 'confirmPassword',
    label: '确认密码',
    component: 'InputPassword',
    required: true,
    dynamicRules: ({ values }) => {
      return [
        {
          required: true,
          // @ts-ignore
          validator: async (rule, value) => {
            if (!value) {
              /* eslint-disable-next-line */
              return Promise.reject('请输入确认密码');
            }
            if (value !== values.password) {
              return Promise.reject('两次输入的密码不一致!');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ];
    },
  },
  {
    field: 'branchInnercode',
    label: '所属机构',
    component: 'TreeSelect',
    required: true,
  },
  {
    label: '所属角色',
    field: 'roles',
    component: 'Select',
    componentProps: {
      mode: 'multiple',
      options: [],
    },
    required: true,
  },
  {
    label: '邮箱',
    field: 'email',
    component: 'Input',
  },
  {
    label: '手机号码',
    field: 'mobile',
    component: 'Input',
  },
];

export const modifyPassFormSchema: FormSchema[] = [
  {
    field: 'userName',
    label: '用户名',
    component: 'Input',
    required: true,
    componentProps: {
      readOnly: true,
      disabled: true,
    },
  },
  {
    field: 'password',
    label: '密码',
    component: 'InputPassword',
    required: true,
  },
  {
    field: 'confirmPassword',
    label: '确认密码',
    component: 'InputPassword',
    required: true,
    dynamicRules: ({ values }) => {
      return [
        {
          required: true,
          // @ts-ignore
          validator: async (rule, value) => {
            if (!value) {
              /* eslint-disable-next-line */
              return Promise.reject('请输入确认密码');
            }
            if (value !== values.password) {
              return Promise.reject('两次输入的密码不一致!');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ];
    },
  },
];
